<script setup lang="ts">
import { computed, nextTick, ref, shallowRef, watch } from "vue";
import { openExternal } from "@/framework/util/shell";
import Grid from "@/components/framework/grid.vue";
import type { ToolInstallVersionItem } from "@/pages/tools/common/types";
import { getPythonVersionListFromNpmmirror, getPythonVersionListFromHuaweiCloud, getPythonVersionListFromOfficial } from "./py-api";
import { VirtList } from "vue-virt-list";
import PyInstallOperation from "./py-install-operation.vue";
import { usePythonStore } from "@/pages/tools/python/py-store";

defineOptions({ name: "py-install-modal" });
const props = defineProps({
  open: { type: Boolean, default: false },
});
const emits = defineEmits({
  "update:open": (open: boolean) => true,
});

const modalOpen = computed({
  get: () => props.open,
  set: open => emits("update:open", open),
});

const websites: Dict<string> = {
  official: "https://www.python.org/ftp/python/",
  npmmirror: "https://npmmirror.com/",
  huaweicloud: "https://mirrors.huaweicloud.com/",
};

const pythonStore = usePythonStore();

const downloadMirror = ref<keyof typeof apis>("npmmirror");
const virtListRef = shallowRef();
const versionList = shallowRef<ToolInstallVersionItem[]>([]);
const loading = ref(false);
watch(versionList, () => nextTick(() => virtListRef.value?.forceUpdate()));

const openOfficialWebsite = () => {
  const website = websites[downloadMirror.value];
  website && openExternal(website);
};

const apis = {
  official: getPythonVersionListFromOfficial,
  npmmirror: getPythonVersionListFromNpmmirror,
  huaweicloud: getPythonVersionListFromHuaweiCloud,
};

const loadVersionList = () => {
  loading.value = true;
  apis[downloadMirror.value]()
    .then(list => (versionList.value = list.filter(it => !pythonStore.nonInstallerVersions[it.version])))
    .finally(() => (loading.value = false));
};

watch(downloadMirror, () => nextTick(loadVersionList));
watch(modalOpen, open => open && nextTick(loadVersionList));
</script>

<template>
  <a-modal v-model:open="modalOpen" title="安装" centered width="800px" destroy-on-close>
    <grid rows-preset="two-rows-0" style="height: 350px">
      <a-form layout="inline" class="mb-10">
        <a-form-item label="下载源">
          <div class="w-150">
            <a-select v-model:value="downloadMirror">
              <a-select-option value="npmmirror">npmmirror</a-select-option>
              <a-select-option value="huaweicloud">华为云</a-select-option>
              <a-select-option value="official">Python官网</a-select-option>
            </a-select>
          </div>
        </a-form-item>
      </a-form>
      <div class="position-relative">
        <virt-list ref="virtListRef" :min-size="40" item-key="id" :list="versionList" class="border-top" item-class="tool-install-version-item">
          <template v-slot="{ itemData }">
            <div class="flex aic col-gap-10">
              <span :class="['w-100 bold', pythonStore.nonInstallerVersions[itemData.version] && 'color-gray']">{{ itemData.name }}</span>
              <span class="color-text-secondary">{{ itemData.modified?.toLocaleString() }}</span>
            </div>
            <span v-if="pythonStore.nonInstallerVersions[itemData.version]" class="color-gray">没有安装文件</span>
            <py-install-operation v-else :version-info="itemData" :mirror="downloadMirror" />
          </template>
        </virt-list>
        <div class="position-absolute abs-fill flex-center" v-if="loading">
          <a-spin />
        </div>
      </div>
    </grid>

    <template #footer>
      <div class="flex-sb">
        <a-space>
          <a-button type="link" @click="openOfficialWebsite">{{ websites[downloadMirror] }}</a-button>
        </a-space>
        <a-space>
          <a-button @click="modalOpen = false">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>
